<template>
	<view class="my_container">
		<custom-navbar-two :title="pageTitle" :style="navbarStyle" />
		<view class="my_container_body">
			<view class="my_container_body_head"></view>
			<view class="my_container_body_button">
				<view  :class="{ activeClass: busPubInfo.resourceType == 1}">我要发售</view>
				<view  :class="{ activeClass: busPubInfo.resourceType == 2}">我要求购</view>
			</view>
			<view class="my_container_body_card">
				<view class="head">
					<view >资源分类</view>
					<view class="title_one">{{busPubInfo.product1}}</view>
					<view class="title">{{busPubInfo.product2}}</view>
					<view class="title">{{busPubInfo.product3}}</view>
				</view>
				<view class="xian"></view>
                <view class="my_input">
					<view class="my_input_head">
						<view class="head_head">标题</view>  
						<view class="head_input">
							{{busPubInfo.title}}
						</view>
					</view> 
					<view class="my_input_body">
						{{busPubInfo.pubContent}}
					</view> 
				</view>
				<view class="photoShow" v-if="busPubInfo.picList != null &&  busPubInfo.picList.length > 0 " >
				    <view class="photoShowItem" v-for="(item,index) in busPubInfo.picList">
				    	<image @click="previewMyImage(index)"  :src="item.fileUrl" :key="index"></image>
				    </view>
				</view>
				<view class="photoNo" v-else>
					暂未上传图片
				</view>
				<view class="videoShow" v-if="busPubInfo.videoOssIdUrlStr">
					<video class="video1" id="myVideo" :src="busPubInfo.videoOssIdUrlStr"
					  enable-danmu danmu-btn controls></video>
				</view>
				<view class="videoShow" style="text-align: center;"  v-else>
					<view>暂未上传视频</view>
				</view>
				<view style="height: 20rpx;">
				</view>
			</view>
			<view class="fotter_input">
				<view class="fotter_input_head">
					<view class="fotter_input_head_o">价格</view>
					<view class="fotter_input_head_tw"><u--input
					 inputAlign="center"
							border="none"
							v-model="busPubInfo.price"
						  ></u--input>
					</view>
					<view class="fotter_input_head_t">元/吨</view>
					<image class="fotter_input_head_f" src="../../static/imags/Vector.png"></image>
				</view>
				<view class="fotter_input_body">
					<view class="fotter_input_body_o">位置</view>
					<view class="fotter_input_body_tw">
						{{busPubInfo.province}}{{busPubInfo.city}}{{busPubInfo.district}}{{busPubInfo.address}}
					</view>
				</view>
			</view>
			<view style="height: 28rpx;"></view>
			 </view>
		</view>
	</view>
</template>

<script>
	import CustomNavbarTwo from "@/components/CustomNavbarTwo.vue";
	const api = require('../../util/api.js');
	export default {
		components: { CustomNavbarTwo },
		data() {
			return {
				busPubInfo: {},
				parentId:null,
				showLevel1:false,
				columns:[[{id:1,label:"废纸"},{id:2,label:"设备"},{id:3,label:"废塑料"}]],
				showPopup: false,
				groups: [],
				groupIndex:null,
				tagIndex: null,
				pageTitle:"",
				value:""
		};
	},
	onLoad(e) {
		this.busPubInfo.id = e.id
		this.getDetail()
	},
	methods: {
        getDetail() {
			this.$https.get(this.$api.pubInfoDetail,this.busPubInfo).then(res => {
				if(res.code === 200) {
				    this.busPubInfo = res.data
					this.pageTitle =  this.busPubInfo.product1 + "详情"
				}else{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
				}
			})
		},
		speak() {
			
		},
		previewMyImage(index) { // index 索引 如果 需要复用方法 可以使用 类型来进行区分(val)
			var photoList =this.busPubInfo.picList.map(item => {
				return item.fileUrl
			})
			uni.previewImage({
				current: index,     // 当前显示图片的索引值
				urls: photoList,    // 需要预览的图片列表，photoList要求必须是数组
				loop:true,          // 是否可循环预览
			})
		},
	},
	onReady() {
		
    },
	}
</script>

<style lang="scss" scoped>
	.my_container {
		font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
		font-style: normal;
		text-transform: none;
		background: linear-gradient( 180deg, #DDFFDE 0%, #F7F7F7 29%, #F7F7F7 100%);
		width: 100%;
		min-height: 1624rpx;
		.my_container_body {
			width: 750rpx;
			.my_container_body_head {
				width: 686rpx;
				height: 154rpx;
			}
			.my_container_body_button {
				margin-top: 12rpx;
				display: flex;
				width: 750rpx;
				height: 90rpx;
				.activeClass {
				  background: #1EE825; 
				  color: white; 
				  font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				  font-weight: 500;
				  font-size: 28rpx;
				  font-style: normal;
				  text-transform: none;
				}
				view{
					width: 330rpx;
					height: 90rpx;
					text-align: center;
					line-height: 90rpx;
					margin-left: 32rpx;
					background: white;
					color: black;
					border-radius: 84rpx 84rpx 84rpx 84rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 28rpx;
					font-style: normal;
					text-transform: none;
				}
			}
			.my_container_body_card {
				width: 686rpx;
				margin-left: 32rpx;
				margin-top: 20rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				.head {
					width: 686rpx;
					height: 90rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #333333;
					line-height: 90rpx;
					display: flex;
					:nth-child(1) {
						width: 112rpx;
						height: 90rpx;
						margin-left: 32rpx;
						text-align: left;
					}
					.title_one {
						width: 80rpx;
						text-align: right;
					}
					.title {
						width: 172rpx;
						height: 90rpx;
						text-align: right;
					}
					image{
						width: 28rpx;
						height: 28rpx;
						margin-top: 31rpx;
						background-image: url('/static/imags/xia_two.png');
					}
				}
				.xian {
					width: 622rpx;
					height: 0rpx;
					border-radius: 0rpx 0rpx 0rpx 0rpx;
					border: 1rpx solid #E4E4E4;
					margin-left: 32rpx;
				}
				.my_input {
					width: 686rpx;
					height: 280rpx;
					.my_input_head {
						height: 90rpx;
						width: 622rpx;
						margin-left: 32rpx;
						display: flex;
						.head_head {
							width: 72rpx;
							height: 90rpx;
							line-height: 90rpx;
							font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							font-style: normal;
							text-transform: none;
						}
						.head_input {
							width: 550rpx;
							height: 70rpx;
							line-height: 64rpx;
							margin-top: 15rpx;
						}
					}
					.my_input_body {
						width: 622rpx;
						margin-left: 32rpx;
						height: 172rpx;
						margin-top: 10rpx;
					}
				}
				.my_input_yuyin {
					display: flex;
					width: 686rpx;
					margin-left:32rpx;
					height: 40rpx;
					margin-top: 12rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					font-style: normal;
					text-transform: none;
					view{
						width: 304rpx;;
						height: 40rpx;
					}
					image{
						width: 42rpx;
						height: 40rpx;
						margin-left: 16rpx;
					}
				}
				.my_input_biaoti {
					margin-top: 26rpx;
					width: 454rpx;
					height: 40rpx;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
					line-height: 39rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin-left: 32rpx;
				}
				.show_add {
					margin-top: 26rpx;
					margin-left: 32rpx;
					width: 630rpx;
					height: 156rpx;
					display: flex;
					font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					font-weight: 500;
					font-size: 26rpx;
					color: #333333;
					line-height: 36rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
					.show_add_left{
						width: 304rpx;
						height: 156rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						display: flex;
						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}
						view{
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}
					.show_add_right {
						width: 304rpx;
						height: 156rpx;
						background: #F6F6F6;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						margin-left: 22rpx;
						display: flex;
						image {
							width: 64rpx;
							height: 64rpx;
							margin-top: 46rpx;
							margin-left: 28rpx;
						}
						view{
							width: 104rpx;
							height: 36rpx;
							margin-top: 60rpx;
							margin-left: 24rpx;
						}
					}
				}
				.photoShow {
					margin-top: 30rpx;
					width: 666rpx;
					height: 144rpx;
					display: flex;
					.photoShowItem {
						position: relative;
						height: 144rpx;
						width: 144rpx;
						margin-left: 12rpx;
						image{
							height: 144rpx;
							width: 144rpx;
							margin-left: 18rpx;
							border-radius: 20rpx 20rpx 20rpx 20rpx;
						}
						.delete-btn {
						  position: absolute;
						  text-align: center;
						  top: -20rpx;
						  right: -24rpx;
						  font-size: 36rpx;
						  width: 20rpx;
						  height: 20rpx;
						  color: black;
						  // cursor: pointer;
						  // border: solid 2rpx #333;
						}
					}	
				}
				.photoNo {
					margin-top: 30rpx;
					width: 666rpx;
					margin-left: 12rpx;
					height: 144rpx;
					text-align: center;
					line-height: 144rpx;
				}
				.videoShow {
					margin-top: 30rpx;
					width: 630rpx;
					margin-left: 28rpx;
					height: 144rpx;
					.video1 {
						width: 630rpx;
						height: 144rpx;
					}
				}
	
			}
			.fotter_input {
				width: 686rpx;
				height: 188rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin-top: 28rpx;
				margin-left: 32rpx;
				.fotter_input_head {
					height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					border-bottom: 1rpx solid #E4E4E4;
					display: flex;
					.fotter_input_head_o {
						line-height: 104rpx;
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_head_tw {
						width: 437rpx;
						height: 70rpx;
						line-height: 70rpx;
						margin-top: 17rpx;
						padding-top: 11rpx;
					}
					.fotter_input_head_t {
						width: 70rpx;
						line-height: 104rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 28rpx;
						color: #777777;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_head_f{
						width: 28rpx;
						height: 28rpx;
						margin-top: 33rpx;
						margin-left: 10rpx;
					}
				}
				.fotter_input_body {
					height: 94rpx;
					line-height: 94rpx;
					width: 622rpx;
					margin-left: 32rpx;
					display: flex;
					.fotter_input_body_o {
						width: 60rpx;
						font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
						font-weight: 400;
						font-size: 30rpx;
						color: #333333;
						text-align: left;
						font-style: normal;
						text-transform: none;
					}
					.fotter_input_body_tw {
						margin-left: 10rpx;
						width: 504rpx;
						font-size: 28rpx;
						text-align: left;
					}
					// .fotter_input_body_t {
					// 	width: 120rpx;
					// 	font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
					// 	font-weight: 400;
					// 	font-size: 28rpx;
					// 	color: #777777;
					// 	text-align: right;
					// 	font-style: normal;
					// 	text-transform: none;
					// }
					.fotter_input_body_f{
						width: 28rpx;
						height: 28rpx;
						margin-top: 40rpx;
						margin-left: 10rpx;
					}
				}
			}
			.foter_bottom{
				margin-top: 28rpx;
				width: 686rpx;
				margin-left: 32rpx;
				height: 92rpx;
				line-height: 92rpx;
				background: #1EE825;
				border-radius: 100rpx 100rpx 100rpx 100rpx;
				font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
				font-weight: 500;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				font-style: normal;
				text-transform: none;
			}
		}
		// 变量定义
		.content {
		  position: fixed; /* 固定位置 */
		   bottom: 0;       /* 从屏幕底部开始 */
		   left: 0;         /* 水平从左侧开始 */
		   width: 100%;     /* 占满屏幕宽度 */
		   height: 810rpx; /* 内容高度 */
		   background: #FFFFFF;
		   flex-direction: column;
		   z-index: 9999; /* 确保覆盖内容部分 */
		  background: #FFFFFF;
		  .head_der {
			  width: 100%;    
			  display: flex;
			  // 左侧分类列表
			  .left-menu {
			   width: 178rpx;
			   height: 676rpx;
			   background: #F6F6F6;
			   border-radius: 0rpx 24rpx 24rpx 0rpx;
		       text-align: center;
			   line-height: 676rpx;
			  }
			  		
			  // 右侧标签组
			  .right-content {
			    flex: 1;
			    width: 512rpx;
			    height: 676rpx;
			    overflow-y: scroll;
			    margin-left: 30rpx;
			    .tag-group {
				  width: 512rpx;
			      margin-bottom: 20rpx;
			      .group-header {
			        display: flex;
			        justify-content: space-between;
			        align-items: center;
			        padding: 10rpx 0;
			        font-size: 28rpx;
			        color: #333;
			        border-bottom: 1px solid #ddd;
			        .group-title {
			          flex: 1;
					  font-weight: 550;
			        }
			  		
			        .toggle-icon {
			          width: 28rpx;
			          height: 28rpx;
			        }
			      }
			  		
			      .tag-list {
			        display: flex;
			        flex-wrap: wrap;
			        gap: 10rpx;
			        margin-top: 10rpx;
			  		
			        .tag {
			          padding: 10rpx 20rpx;
			          font-size: 24rpx;
			          background-color: #f4f4f4;
			          border-radius: 20rpx;
			          color: #333;
			          cursor: pointer;
			  		
			          &.active {
			            background-color:  #1EE825;;
			            color: #fff;
			          }
			        }
			      }
			    }
			  }
		
		  }
		  // 底部操作栏
		  .footer {
		    display: flex;
		    width: 750rpx;
		    height: 134rpx;
		    .btn {
		     width: 207rpx;
		     height: 76rpx;
		     background: #FFFFFF;
		     border-radius: 84rpx 84rpx 84rpx 84rpx;
		     border: 2rpx solid #DADADA;
			 font-weight: 400;
			 font-size: 28rpx;
			 color: #777777;
			 margin-left: 32rpx;
			 text-align: center;
			 line-height: 76rpx;
			 margin-top: 32rpx;
		      &.confirm {
			   color: #FFFFFF;
		       background: #1EE825;
		      }
		    }
		  }
		}
	}
</style>